<template>
	<view class="page page-enterprise-detail">
		<view class="swiper-wrap" v-if="info.workshop_pics?.length">
			<swiper style="height: 100%;" circular :indicator-dots="true" :autoplay="true">
				<swiper-item v-for="(v,k) in info.workshop_pics" :key="k">
					<image class="h-full w-full" :src="v" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<view p-15px flex items-center>
			<view class="logo">
				<image v-if="info.logo" mode="aspectFill" :src="info.logo"></image>
				<view v-else class="icon icon-enterprise-logo"></view>
			</view>
			<view text-lg pl-10px fw-600>{{ info.firm_name }}</view>
		</view>
		<view px-15px pb-20px v-if="info.company_intro">{{ info.company_intro }}</view>

		<divider height="5px"></divider>

		<view class="overflow-auto" pt-5px mb-5px>
			<uni-segmented-control :current="current" :values="tabs" style-type="text" active-color="#0041a5" @clickItem="onTabsClick" />
		</view>

		<template v-if="!current">
			<view p-15px>{{ info.merito }}</view>
			<view class="products p-15px" v-if="info.prdoucts?.length">
				<view class="product pb-10px" v-for="item in info.prdoucts" @click="goProduct(item.goods_id)">
					<image class="image" :src="item.image_thumb" mode="aspectFill" />
					<view text-base px-10px pb-10px>{{ item.name }}</view>
				</view>
			</view>
			<view v-else flex items-center justify-center flex-col py-30px color-gray>
				<view class="icon icon-nodata text-8xl"></view>
				<view pt-10px>暂无数据</view>
			</view>
		</template>
		<template v-else-if="current == 1">
			<view text-lg fw-600 p-15px>工商信息</view>
			<view flex pb-15px text-base px-15px>
				<view pr-15px c-gray-5>信用代码</view> <view flex-1>{{ info.credit_code }}</view>
			</view>
			<view flex pb-15px text-base px-15px>
				<view pr-15px c-gray-5>企业法人</view> <view flex-1>{{ info.firm_boss }}</view>
			</view>
			<view flex pb-15px text-base px-15px>
				<view pr-15px c-gray-5>注册资金</view> <view flex-1>{{ info.credit_code }}</view>
			</view>
			<view flex pb-15px text-base px-15px>
				<view pr-15px c-gray-5>成立时间</view> <view flex-1>{{ info.established_time }}</view>
			</view>
			<view flex pb-15px text-base px-15px>
				<view pr-15px c-gray-5>注册地址</view> <view flex-1>{{ info.firm_address }}</view>
			</view>
			<view pb-15px text-base px-15px>
				<view pr-15px c-gray-5>经营范围：</view>
				<view pt-8px>{{ info.business_scope }}
			</view>
			</view>

			<view text-lg fw-600 p-15px>联系方式</view>
			<uni-group :title="info.contact_person || '-' " mode="card">
				<view class="phone-wrap" @click="doPhoneCall">
					<view text-xl class="icon icon-tel"></view>
				</view>
				<view flex pb-15px text-base v-if="info.contact_email">
					<view pr-15px c-gray-5>邮箱</view> <view flex-1>{{ info.contact_email.split(';').join(' ') }}</view>
				</view>
				<view flex pb-5px text-base v-if="info.contact_address">
					<view pr-15px c-gray-5>地址</view> <view flex-1>{{ info.contact_address }}</view>
				</view>
			</uni-group>

			<view text-lg fw-600 p-15px v-if="info.website">官网</view>
			<view flex pb-15px text-base px-15px v-if="info.website">
				<view pr-15px c-gray-5>官网</view> <view flex-1>{{ info.website }}</view>
			</view>

			<view text-lg fw-600 p-15px>生产信息</view>
			<view flex pb-15px text-base px-15px v-if="info.production_number">
				<view pr-15px c-gray-5>生产人数</view> <view flex-1>{{ info.production_number }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="info.develop_number">
				<view pr-15px c-gray-5>研发人数</view> <view flex-1>{{ info.develop_number }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="info.production_base">
				<view pr-15px c-gray-5>生产基地</view> <view flex-1>{{ info.production_base }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="info.principal_market">
				<view pr-15px c-gray-5>主要市场</view> <view flex-1>{{ info.principal_market }}</view>
			</view>
			<view pb-15px text-base px-15px  v-if="info.business_license">
				<view pr-15px c-gray-5 pb-10px>资质证明</view> 
				<image w-full :src="info.business_license" mode="widthFix" />
			</view>
		</template>
		<template v-else-if="current == 2">
			<view class="demand-list p-15px" v-if="list.length">

				<view class="block-item mb10px" 
					v-if="list.length"
					v-for="i in list" :key="i.type== 'supply'? i.supply_id : i.askbuy_id" 
					@click="goDetail(i)"
				>
					<view flex items-baseline pb-10px>
						<uni-tag v-if="i.type == 'supply'" text="供应" type="error" size="mini" />
						<uni-tag v-else text="求购" type="success" size="mini" />
						<view class="flex-1 font-600 text-lg mt-4px ml-5px">{{i.description}}</view>
					</view>
					<view flex items-center pt-5px pb5px v-if="i.category_name">
						<view class="icon icon-type"></view>
						<view text-sm ml-10px mt--2px>类型： {{i.category_name}}</view>
					</view>
					<view flex items-center pt-5px pb5px>
						<view class="icon icon-name"></view>
						<view text-sm ml-10px mt--2px>名称： {{i.name}}</view>
					</view>
					<view flex items-center pt-5px pb5px>
						<view class="icon icon-num"></view>
						<view text-sm ml-10px mt--2px>数量： {{i.number}}</view>
					</view>
					<view flex items-center pt-5px pb5px>
						<view class="icon icon-price pl-2px"></view>
						<view text-sm ml-10px mt--2px>价格： {{i.price_name}}</view>
					</view>
					<view flex pt-5px pb5px v-if="i.region_name">
						<view class="icon icon-region"></view>
						<view text-sm ml-10px mt--2px flex> 
							<view>地区：</view>
							<view flex-1> 
								<text mr-10px mb-10px v-for="v in Object.values(i.region_name)">{{ v }}</text>
							</view>
						</view>
					</view>
					<view flex items-center pt-5px pb5px v-if="!current">
						<view class="icon icon-time"></view>
						<view text-sm ml-10px mt--2px>时效： {{i.ageing_name}}</view>
					</view>
					<view class="overflow-auto whitespace-nowrap pt-5px pb10px" v-if="i.images?.length">
						<image class="image" v-for="img in i.images" :key="img" :src="img" lazy-load mode="aspectFill" />
					</view>
					<view flex items-center pt-5px pb5px justify-between>
						<view flex items-center>
							<view v-if="i.type == 'supply'" class="w-80 h-80 relative flex items-center">
								<image v-if="i.firm?.logo" w-full h-full :src="i.firm?.logo" rounded-full />
								<view v-else class="icon icon-enterprise-logo"></view>
								<span v-if="i.member && i.member.level !== 'free'"
									:class="`icon icon-vip absolute bottom-0 right--16 text-32 color-${i.member.level}`">
								</span>
							</view>
							<view v-else class="circle1 text-xs bg-blue-4 relative">
								求购方
								<span v-if="i.member && i.member.level !== 'free'"
									:class="`icon icon-vip absolute bottom-0 right--18 text-32 color-${i.member.level}`">
								</span>
							</view>
							<view ml-4>
								<view text-sm v-if="i.type == 'supply'">{{i.firm?.firm_name}}</view>
								<view text-sm v-else>求购方</view>
								<view text-xs mt5px color-bluegray>{{i.updated_at}}</view>
							</view>
						</view>
						
						<view 
							class="contact bg-blue-1" 
							v-if="(i.type == 'supply' && i.firm?.contact_phone) || i.member?.mobile" 
							@click.stop="phoneCall(i)"
						>
							<view class="icon icon-tel"></view>
							<view pl-2px>联系</view>
						</view>
					</view>
				</view>

			</view>
			<view v-else flex items-center justify-center flex-col py-30px color-gray>
				<view class="icon icon-nodata text-8xl"></view>
				<view pt-10px>暂无数据</view>
			</view>
		</template>
		<view p-15px v-else>
			{{ info.firm_about }}
		</view>

		<view class="bottoms">
			<view text-center w-3_sl_20 @click="go('index')">
				<view class="icon icon-home text-2xl"></view>
				<view>主页</view>
			</view>
			<view text-center w-3_sl_20 @click="collectFn">
				<view class="icon text-2xl" :class="collected ? 'icon-collect-filled c-blue-5' : 'icon-collect'"></view>
				<view>收藏</view>
			</view>

			<view class="btns">
				<view class="left" @click="doConsult">咨询客服</view>
				<view class="right" @click="doPhoneCall">打电话</view>
			</view>
		</view>
	</view>
	<contact :phone="requirePhone" :id="require_id" v-model:show="showContactModel" />

</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { makePhoneCall, consult} from '@/common/utils'
	
	const {id} = defineProps({
		id: String
	})

	const info = ref({})
	const collected = ref(false)
	const list = ref([])
	async function getInfo() {
		const res = await api.getEnterpriseInfo({ id })
		collected.value = res.collect
		info.value = res
		list.value = await api.enterpriseNews({firm_id: id})
	}
	getInfo()
	
	const collectFn = async () => {
		let res = await api.collect({
			source_id: id,
			type: 'firm'
		})
		if(res) {
			collected.value = !collected.value
		}
	}


	const tabs = ['主营产品','企业档案','企业动态','关于我们']
	const current = ref(0)
	const onTabsClick = ({currentIndex}) => {
		if (current.value == currentIndex) return
		current.value = currentIndex
	}

	const goProduct = id => {
		if(!id) return
		uni.navigateTo({
			url: `/pages/product/detail?id=${id}`
		})
	}

	const goDetail = (i) => {
		const supply = i.type == 'supply'
		uni.navigateTo({
			url: `/pages/demand/detail?id=${supply? i.supply_id : i.askbuy_id}&type=${supply? 'supply':'require'}`
		})
	}

	const showContactModel = ref(false)
	const requirePhone = ref('')
	const require_id = ref('')
	const phoneCall = i => {
		if(i.type == 'supply') {
			makePhoneCall({
				phone: i.firm.contact_phone,
				id: i.supply_id,
				source: 'supply'
			})
			return
		}
		requirePhone.value = i.member.mobile
		require_id.value = i.member.askbuy_id
		showContactModel.value = true
	}


	const doPhoneCall = () => {
		makePhoneCall({ 
			phone: info.value.contact_phone,
			source: 'firm',
			id: info.value.id,
		})
	}

	const doConsult = () => {
		consult({ 
			source: 'firm',
			id: info.value.id,
		})
	}

</script>

<style lang="scss">
.page-enterprise-detail {

	.uni-card__header .uni-card__header-avatar {
		border-radius: 100px;
		.uni-card__header-avatar-image {
			scale: 1.5;
		}
	}

	.uni-group--card {
		position: relative;
	}
	.uni-group__title {
		background-color: $uni-color-navigator;
	}
	.uni-group__title-text {
		color: white;
		font-size: 30upx;
	}
	.phone-wrap {
		color: white;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 2;
		padding: 6px 20px;
	}

	.products {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.product {
		width: 48%;
		.image {
			aspect-ratio: 4/3;
			width: 100%;
			height: auto;
		}
	}

	.swiper-wrap {
		aspect-ratio: 3/2;
	}

	.logo {
		width: 120upx;
		height: 120upx;
		border-radius: 100%;
		font-size: 120upx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		color: $uni-color-blue;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.block-item {
		background-color: white;
		.icon {
			color: gray;
		}

		.icon-enterprise-logo {
			font-size: 80upx;
			color: $uni-color-navigator;
		}
		
		.image {
			width: 240upx;
			height: auto;
			aspect-ratio: 3/4;
			margin-right: 10px;
		}

		.circle1 {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.contact {
			display: flex;
			align-items: center;
			color: $uni-color-blue;
			border-radius: 100px;
			padding: 4px 10px;

			.icon {
				color: $uni-color-blue;
				margin-top: 2px;
				margin-right: 2px;
			}
		}
	}

	.bottoms {
		position: fixed;
		width: 100%;
		padding: 0 2%;
		height: 120upx;
		left: 0;
		bottom: 0;
		z-index: 9;
		background: white;
		box-shadow: 0 0 4px 0 grey;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		.btns {
			margin-left: 3%;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36upx;
			color: white;
		}
		.left {
			flex:1;
			background-color: $uni-color-blue-light;
			color: $uni-color-blue;
			border-radius: 100px 0 0 100px;
			padding: 10px 0;
			text-align: center;
		}
		.right {
			flex:1;
			background-color: $uni-color-navigator;
			border-radius:  0 100px 100px 0 ;
			padding: 10px 0;
			text-align: center;
		}
	}
}
</style>